<template>
	<up-popup 
		:show="props.commentTwo ? replyStore.showReply2 : replyStore.showReply" 
		@close="props.commentTwo ? replyStore.hidden2() :replyStore.hidden()" 
		@open="props.commentTwo ? replyStore.show2() : replyStore.show()">
		<view class="replies-detail">
			<up-textarea
				autoHeight 
				maxlength="400"
				border="none"
				v-model="inputVal"
				:placeholder="props.customPlaceholder"
				:showConfirmBar="false"
				class="replies-textarea"
				@focus="openBtn"
				@blur.stop="closeBtn"
				></up-textarea>
			<button 
				v-show="showBtn"
				class="btn"
				@click="handleReplyPublish(props.postId)">发送</button>
		</view>
	</up-popup>
</template>

<script lang="ts" setup name="">
	import { usereplyStore } from '../../store/modules/reply'
	import {postCommentOne,postCommentTwo} from '../../apis/comment'
	import { ref } from 'vue'
	const replyStore = usereplyStore();

	const props = defineProps({
	  // 评论数据
	  postId: {
	    type: Object,
	    default: () => {},
	  },
	  customPlaceholder: {
	    type: String,
	    default: () => {},
	  },
	  commentTwo: {
	    type: Boolean,
	    default: false,
	  },
	});

	console.log(props.commentTwo);

	// 输入框的value
	const inputVal = ref("")
	// 显示发送按钮
	const showBtn = ref(false)
	function openBtn(){
		showBtn.value = true;
	}
	function closeBtn(){
		showBtn.value = false;
	}
		
	// 回复评论	
	function handleReply(val){	
		console.log('回复评论');
		console.log(val);
		if(props.commentTwo){
			replyStore.show2();
		}
		else{
			replyStore.show();
		}
	}
	// 回复评论	
	async function handleReplyPublish(val){
		console.log(inputVal.value);
		console.log(val);
		// 如果是一级级评论
		if(!props.commentTwo){
			//一级评论接口
			const res = postCommentOne({post_id:val+"",content:inputVal.value})
			replyStore.hidden();
			console.log(res);
		}
		// 如果是二级评论
		else{
			let pages = getCurrentPages();
			let currentPage = pages[pages.length - 1];  
			let options = currentPage.options;
			//二级评论接口
			const res = postCommentTwo({
				comment_one_id:val.comment_id+"",
				post_id:options.postID+"",
				content:inputVal.value,
				last_comment_user_name:val.user_name,
				last_user_id:val.user_id+"",
				last_comment_id:val.comment_id+"",
			})
			replyStore.hidden2();
			console.log(res);
		}
		inputVal.value = ""
	}

</script>

<style scoped lang="scss">

	.replies-detail{
		display: flex;
		align-items: flex-end;
		padding: 20upx;	
		.replies-textarea{
			background-color: pink !important;
			padding: 15upx 25upx !important;
			border-radius: 50upx !important;
			margin-right: 20upx;	
		}
		.btn{
			color:white;
			background-color:$primary;
			border-radius: 50rpx;
			height: 70upx;
			line-height: 70upx;
			font-size: 25upx;
			
		}
	}
</style>